<!DOCTYPE html>
<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <meta name="renderer" content="webkit">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	    <title>建新街道移动办公 - E事通</title>
	    <link rel="stylesheet" href="/app/static/layui/css/layui.css">
	    <link rel="stylesheet" href="/app/static/styles/style.css">
	    <link rel="icon" href="image/code.png">
	    <script src="/app/static/scripts/jquery-1.9.1.js"></script>
	    <script type="text/javascript" src="/app/static//layui/layui.all.js"></script>
		<script type="text/javascript" src="/app/static/scripts/index.js"></script>
	</head>
	<body class="body">
		<div class="section">
			<div class="wrapper-md">
	       		<h1 class="fl" id="title">工作轨迹</h1>
	        </div>
			<div class="section-content">
				<form class="layui-form filterDiv">
					<div class="layui-inline">
						<label for="">选择日期：</label>
						<div class="layui-input-inline">
						   <input type="text" id="startTime" class="layui-input">
				      	</div>
					</div>
					<button type="button" id="searchBtn" class="def-btn def-btn-normal ml20" ><i class="gopng gopng_search"></i> 查询</button>
					<a href="javascript:history.go(-1);" class="layui-btn layui-btn-small">返回</a>	
				</form>
				<div class="layui-form">
					<div id="map_container" tabindex="0">

					</div>
				</div>
			</div>
		</div>
		<script src="http://webapi.amap.com/maps?v=1.4.0"></script>
		<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
		<script src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
		<script type="text/javascript">
			var form = layui.form,
				layer = layui.layer,
				layedit = layui.layedit,
				laydate = layui.laydate
	
				form.render()
			
			laydate.render({
				elem: '#startTime' //指定元素
			});
						
						
			//获取工作轨迹用户
			var pathSimplifierIns;
			var map = new AMap.Map('map_container',{resizeEnable: true});

			function getTrialDetail(userId,suc){
				$.ajax({
					type:"post",
					url:"/app/trajectory/show_one",
					data:{
						userId:userId
					},
					async:true,
					success:function(res){
						if(res.code=='C10000'){
							if(suc&&typeof suc == 'function'){
								suc(res.data)
							}
						}else{
							layer.msg('数据获取失败', {icon: 5});
						}
					},
					error:function(err){
						layer.msg('数据获取失败', {icon: 5});
					}
				});
			}
			

			
			function initPage(PathSimplifier,path) {
				var map = new AMap.Map('map_container',{resizeEnable: true});
			    //创建组件实例
			    pathSimplifierIns = new PathSimplifier({
			        zIndex: 100,
			        map: map, //所属的地图实例
			        getPath: function(pathData, pathIndex) {
			            //返回轨迹数据中的节点坐标信息，[AMap.LngLat, AMap.LngLat...] 或者 [[lng|number,lat|number],...]
			            return pathData.path;
			        },
			        getHoverTitle: function(pathData, pathIndex, pointIndex) {
			            return '';
			        },
			        clickToSelectPath:false,
			        renderOptions: {
			            //轨迹线的样式
			            pathLineStyle: {
			                strokeStyle: '#19c778',
			                lineWidth: 6,
			                dirArrowStyle: true
			            },
			        }
			    });
			
			    //这里构建两条简单的轨迹，仅作示例
			    pathSimplifierIns.setData([{
			        path: path
			    }]);
				
				var pathLength=path.length-1;
				new AMap.Marker({
					content:'<div class="marker-marker-start"></div>',
			        position : path[0],
			        offset : new AMap.Pixel(-12,-12),
			        map : map
				});
				new AMap.Marker({
					content:'<div class="marker-marker-end"></div>',
			        position : path[pathLength],
			        offset : new AMap.Pixel(-12,-12),
			        map : map
				});
			}
						
			
			
			AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function(PathSimplifier, $) {
		        if (!PathSimplifier.supportCanvas) {
		            alert('当前环境不支持 Canvas！');
		            return;
		        }
		        
		        function clearMap(){
		        	
					//map.remove(pathSimplifierIns)
				    //document.getElementById("map_container").innerHTML = '&nbsp;';
				    getTrialDetail(1,function(data){
						var path= [];
						data.forEach(item=>{
							path.push(
								[Number(item.coordinatex),Number(item.coordinatey)]
							)
						})
						
						initPage(PathSimplifier,path)
				    });
				}
		        
		        $('#searchBtn').on('click',function(){
		        	clearMap()
		        })
		        
		        
		    	getTrialDetail('',function(data){
					var path= [];
					data.forEach(item=>{
						path.push(
							[Number(item.coordinatex),Number(item.coordinatey)]
						)
					})
					
					initPage(PathSimplifier,path)
			    });

		    	
		    })	
			    	
			    	

		</script>
	</body>
</html>